'use strict'

// 3.Dom添加删除修改操作

//## 更新DOM

// // 获取<p>javascript</p>节点:
// var js = document.getElementById('test-js');
// console.log(js);
// // 修改文本为JavaScript:
// // TODO:
// js.textContent = 'JavaScript';
// // 修改CSS为: color: #ff0000, font-weight: bold
// // TODO:
// js.style.color = '#ff0000';
// js.style.fontWeight = 'bold';
// // 测试:
// if (js && js.parentNode && js.parentNode.id === 'test-div' && js.id === 'test-js') {
//     if (js.innerText === 'JavaScript') {
//         if (js.style && js.style.fontWeight === 'bold' && (js.style.color === 'red' || js.style.color === '#ff0000' || js.style.color === '#f00' || js.style.color === 'rgb(255, 0, 0)')) {
//             console.log('测试通过!');
//         } else {
//             console.log('CSS样式测试失败!');
//         }
//     } else {
//         console.log('文本测试失败!');
//     }
// } else {
//     console.log('节点测试失败!');
// }
//---------------------------------------------------------------------------------
// 插入测试:
//按字符串排序
// sort list:
// var sort = document.getElementsByTagName('li');
// console.log(sort);

// var stringArr = [];

// for(var i = 0 ;i<sort.length; i++){
//     stringArr.push(sort[i].innerHTML);
// }
// console.log(stringArr);
//  var newArr = stringArr.sort();
//  console.log(newArr);

     
//  for(var j = 0 ;j<newArr.length;j++){
//     var newSort = document.getElementById('test-list');
//     console.log(newArr[j]);
//      var tag = document.createElement('li');
//      tag.innerHTML = newArr[j];
//      newSort.appendChild(tag);
//  }

//     var sortList = document.getElementById('test-list');
//     for(var i = 0;i<5;i++){
//         sortList.removeChild(sortList.children[0]);
//     }

// ;(function () {
//     var
//         arr, i,
//         t = document.getElementById('test-list');
//     if (t && t.children && t.children.length === 5) {
//         arr = [];
//         for (i=0; i<t.children.length; i++) {
//             arr.push(t.children[i].innerText);
//         }
//         if (arr.toString() === ['Haskell', 'JavaScript', 'Python', 'Ruby', 'Scheme'].toString()) {
//             console.log('测试通过!');
//         }
//         else {
//             console.log('测试失败: ' + arr.toString());
//         }
//     }
//     else {
//         console.log('测试失败!');
//     }
// })();


// 删除DOM
// TODO
// var deleteTest = document.getElementById('test-list');
// console.log(deleteTest);
// deleteTest.removeChild(deleteTest.children[1]);
// deleteTest.removeChild(deleteTest.children[2]);
// deleteTest.removeChild(deleteTest.children[3]);

// // 测试:
// ;(function () {
//     var
//         arr, i,
//         t = document.getElementById('test-list');
//     if (t && t.children && t.children.length === 3) {
//         arr = [];
//         for (i = 0; i < t.children.length; i ++) {
//             arr.push(t.children[i].innerText);
//         }
//         if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) {
//             console.log('测试通过!');
//         }
//         else {
//             console.log('测试失败: ' + arr.toString());
//         }
//     }
//     else {
//         console.log('测试失败!');
//     }
// })();




//更新DOM   1.获取要更新的节点   
//          2.将获取的节点进行操作

//插入DOM    
//         1.添加
//               1.获取要更新节点的上一层节点
//               2.在父节点创建一个子节点
//               3.给子节点添加id，text
//         2.插入
//                1.获取要更新节点的上一层节点
//                2.要插入到哪个子节点的上一行就获取哪个子节点
//                3.在父节点创建一个子节点
//                4.给子节点添加id，text
//                5.将插入的子节点插入到第二步的子节点上

//删除DOM   1.获取删除的父节点
//          2.删除父节点下要删除的子节点


var a = $('#test-link');
a.on('click',function () {
    console.log('xiaopang');
})